<template>
  <div>
    <div>
      <el-dialog title="修改邮箱" :visible.sync="editFlag" >
      <!-- 表单的内容，里面的每一个控件都有一个el-form-item的栏目格式用来规定label以及位置 -->
      <div>
        <el-form label-width="80px">
          <el-form-item label="邮箱名">
            <el-input v-model="emailParam.accountEmail" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 弹出框底部的两个按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toNull()">重 置</el-button>
        <el-button type="primary"  @click="changeGo">提 交</el-button>
      </div>
      </el-dialog>
    </div>


    <el-table
            :data="accounts"
            style="width: 100%"

    >


      <el-table-column
              prop="accountId"
              label="id"
              width="60">
      </el-table-column>
      <el-table-column
              prop="accountName"
              label="账号名字"
              width="70">
      </el-table-column>

      <el-table-column
              prop="userId"
              label="用户id"
              width="100"
      >
      </el-table-column>
      <el-table-column
              prop="userName"
              label="用户名字"
              width="100"
      >
      </el-table-column>
      <el-table-column
              prop="accountEmail"
              label="用户邮箱"
              width="100"
      >
      </el-table-column>

      <el-table-column label="操作"
                       width="300">
        <template slot-scope="scope">

          <el-button @click="changeEmail(scope.row.accountId)" type="warning" icon="el-icon-edit" circle >修改邮箱</el-button>
          <!--        <el-button @click="delOne(scope.row.movieId)" type="danger" icon="el-icon-delete" circle ></el-button>-->
        </template>
      </el-table-column>


    </el-table>
    <div class="block">
      <el-pagination
              layout="prev, pager, next"
              :total="this.total" :page-size="findAccountParam.pageSize"
              :current-page="findAccountParam.pageIndex"
              @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>


</template>

<script>
export default {
  name: "user",
  data(){
    return{
      accounts:null,
      findAccountParam:{
        pageIndex:1,
        pageSize:10,
        keyWord:null
      },
      total:null,
      editFlag:false,
      emailParam:{
        accountId:null,
        accountEmail:null
      }
    }
  },
  methods: {
    getAccounts() {
      this.$http.post("woniuAccount/like", this.findAccountParam).then(
              resp => {
                this.accounts = resp.data.object.accountDtos;
                this.pageIndex = resp.data.object.pageIndex;
                this.total = resp.data.object.total;

              }
      )
    },
    changeEmail(id){
      this.emailParam.accountId = id;
      this.editFlag=true;
    },
    pageChange() {
      this.getAccounts();
    },

    changeGo(){
      this.$http.post("woniuAccount/email", this.emailParam).then(
              resp => {
                if (resp.data.code == 20000) {
                  this.$message({
                    message: resp.data.message,
                    type: 'success'
                  });
                  this.getAccounts();
                  this.editFlag=false;
                }
              }
      )
    },
    toNull(){
      this.emailParam={
        accountId:null,
        accountEmail:null
      }
    }

  },
  created() {
    this.getAccounts();
  }
}
</script>

<style scoped>

</style>